<script lang="ts" setup name="GoodsCategory">
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import { createWaresCategoryList, deleteWaresCategoryList, editWaresCategoryList, getWaresCategoryListAPI } from '~/src/api/goods'
import { Inventory } from '~/src/api/interface/goods'
import { columns } from '../columns/goodsCategoryColumns'
import { Params } from './components'
import CategoryDialog from './components/CategoryDialog.vue'
import ProTable from '/@vab/components/ProTable/index.vue'
const router = useRouter()

const proTable = ref<ProTableInstance>()
const initData: any = reactive({})

const categoryDialogRef = ref<InstanceType<typeof CategoryDialog>>()
const openDialog = async (type: number, info: Inventory.CategoryList) => {
  const { data } = await getWaresCategoryListAPI({})

  categoryDialogRef.value?.putParams({
    visible: true,
    title: type == 2 ? '编辑' : '新增',
    form: {
      typeId: type === 2 ? info.typeId : 1,
      sort: type === 2 ? info.sort : null,
      isShow: type === 1 ? false : type === 2 ? info.isShow : false,
      name: type === 1 ? '' : type === 2 ? info.name : '',
      parentId: type === 1 ? null : info.parentId || info.id,
      id: type === 2 ? info.id : 0,
    },
    optionsCategory: info.parentId ? deepFilterCategory(data ?? [], info) : data || [],
  })
}
const onChangeCategory = async (e: Params) => {
  if (e.title === '编辑') {
    await editWaresCategoryList(e.form)
  } else {
    await createWaresCategoryList(e.form)
  }
  proTable.value?.getTableList()
}
const deleteCategory = () => {}

const deepFilterCategory = (list: Inventory.CategoryList[], info: Inventory.CategoryList): Array<Inventory.CategoryList> => {
  if (!list || !Array.isArray(list)) return [] // 保护
  return (
    list
      .filter((item) => !(item.id === info.id && info.parentId !== 0))
      // 递归对子节点 children 处理
      .map((item) => ({
        ...item,
        children: deepFilterCategory(item.children, info),
      }))
  )
}

const onDelete = async () => {
  const ids: any = proTable.value?.selectedListIds
  if (!ids.length)
    return ElMessage({
      message: '当前未选中商品',
      type: 'error',
    })
  await useHandleData(deleteWaresCategoryList, { id: ids }, '删除选中商品分类')
  proTable.value?.getTableList()
}
</script>

<template>
  <div class="default-table-container auto-height-container">
    <div class="table-box">
      <pro-table
        ref="proTable"
        :columns="columns"
        :indent="20"
        :pagination="false"
        :request-api="getWaresCategoryListAPI"
        row-key="id"
        title="商品分类列表"
      >
        <template #tableHeader>
          <el-button :icon="CirclePlus" type="primary" @click="openDialog(1, initData)">创建分类</el-button>
          <el-button :icon="Delete" type="primary" @click="onDelete">删除</el-button>
        </template>
        <template #isShow="scope">
          <el-switch v-model="scope.row.isShow" disabled size="small" />
        </template>
        <template #name="{ row }">
          <el-button link type="primary" @click="openDialog(2, row)">{{ row.name }}</el-button>
        </template>

        <template #operation="scope">
          <el-button :icon="EditPen" link type="primary" @click="openDialog(3, scope.row)">新增</el-button>
          <!-- <el-button :icon="Delete" link type="primary" @click="deleteCategory(scope.row)">删除</el-button> -->
          <!-- <el-button v-auth="'view'" :icon="EditPen" link type="primary" @click="openDialog('查看', scope.row)">查看</el-button> -->
        </template>
      </pro-table>
    </div>
    <category-dialog ref="categoryDialogRef" @on-confirm="onChangeCategory" />
  </div>
</template>

<style lang="scss" scoped>
.table-box {
  height: 100%;
}
</style>
